<template>
  <a-card :loading="loading" :bordered="false">
    <!-- 业务表单 -->
    <a-form :form="form" style="margin-top: 8px">
      <!-- 职务名称 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="职务名称">
        <a-input
          placeholder="请输入职务名称"
          v-decorator="[
            'postName',
            {
              rules: [{ required: true, message: '请输入职务名称！' }]
            }
          ]"
          :disabled="!editable || editableFiexd['postName']"
        />
      </a-form-item>

      <!-- 职务编码 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="职务编码">
        <a-input
          placeholder="请输入职务编码"
          v-decorator="[
            'postCode',
            {
              rules: [{ required: true, message: '请输入职务编码！' }]
            }
          ]"
          :disabled="!editable || editableFiexd['postCode']"
        />
      </a-form-item>

      <!-- 职级 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="职级">
        <j-dict-select-tag
          v-decorator="[
            'postRank',
            {
              rules: [{ required: true, message: '请选择职级！' }]
            }
          ]"
          :disabled="!editable || editableFiexd['postRank']"
          :triggerChange="true"
          dictCode="position_rank"
        />
      </a-form-item>
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="任职级状态">
        <a-select
          v-decorator="[
            'postStatus',
            {
              rules: [{ required: true, message: '请选择职级！' }]
            }
          ]"
        >
          <a-select-option :value="0">在职</a-select-option>
          <a-select-option :value="1">离职</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="任职开始时间">
        <a-date-picker
          format="YYYY-MM-DD"
          v-decorator="[
            'beginTime',
            {
              initialValue: null,
              rules: [{ required: true, message: '请选择任职开始时间！' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="任职结束时间">
        <a-date-picker
          format="YYYY-MM-DD"
          v-decorator="[
            'endTime',
            {
              initialValue: null
            }
          ]"
        />
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
import XSelectUserByDep from '@/components/extends/XSelectUserByDep'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { getSocietyById } from '@/api/api'
import pick from 'lodash.pick'
import { httpAction, getAction } from '../../../api/manage'
let formData = {
  beginTime: '',
  endTime: '',
  id: '',
  postCode: '',
  postName: '',
  postRank: '',
  postStatus: 0,
  userId: '',
  userName: ''
}
export default {
  name: 'UserPositionForm',
  components: {
    JSelectDepart,
    JDictSelectTag,
    JSelectMultiUser,
    XSelectUserByDep
  },
  model: {
    prop: 'data',
    event: 'onchange'
  },
  props: {
    dataId: String,
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    canDismiss: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: true
    },
    editableFiexd: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: true,
      form: this.$form.createForm(this),
      formData: formData,
      url: {
        add: '/sys/userPosition/add',
        edit: '/sys/userPosition/edit',
        queryById: '/sys/userPosition/queryById'
      }
    }
  },
  beforeMount() {
    if (this.dataId) {
      this.loading = true
      getAction(this.url.queryById, { id: this.dataId }).then(res => {
        if (res.success) {
          this.formData = res.result || {}
          this.loading = false
        }
      })
    } else {
      this.loading = false
    }
  },
  methods: {
    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.formData.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.formData, values)
          formData.beginTime && (formData.beginTime = formData.beginTime.valueOf())
          formData.endTime && (formData.endTime = formData.endTime.valueOf())
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    }
  },
  watch: {
    dataId(nv, on) {
      if (nv) {
        this.formData = {}
        this.loading = true
        getAction(this.url.queryById, { id: nv }).then(res => {
          if (res.success) {
            this.formData = res.result || {}
            this.loading = false
          }
        })
      }
    },
    data: {
      handler(nv, ov) {
        this.formData = nv
      },
      immediate: true,
      deep: true
    },
    formData: {
      handler(nv, ov) {
        // console.log(nv)
        this.$nextTick(() => {
          let obj = Object.assign(
            {
              beginTime: null,
              endTime: null,
              postCode: '',
              postName: '',
              postRank: '',
              postStatus: null
            },
            pick(nv, 'beginTime', 'endTime', 'postCode', 'postName', 'postRank', 'postStatus')
          )

          obj.beginTime = obj.beginTime || null
          obj.endTime = obj.endTime || null
          this.form.setFieldsValue(obj)
        })
        this.$emit('onchange', nv)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style></style>
